<template>
	<div class="user">
		<!-- 红色头部 -->
		<div class="home_top py-2">
			<!-- 头部 -->
			<div class="d-flex jc-between">
				<div></div>
				<div class="d-flex ai-center px-3 mx-1">
					<router-link tag="div" to="/user/setting" class="sezhi iconfont icon-shezhi text-white px-3 mr-2"></router-link>
					<router-link tag="div" to="/botUi" class="iconfont icon-xiaoxi fs-xxxl text-white"></router-link>
				</div>
			</div>
			<!-- 用户信息 -->
			<router-link tag="div" to="/user/userSetting" class="d-flex jc-between ai-center mx-3">
				<div class="d-flex ai-center">
					<div class="pt-3">
						<el-image
						style="width: 70px; height: 70px; border-radius: 50%;"
						:src="user.haedPic"
						fit="cover">
					</el-image>
					</div>
					<div class="ai-center mx-3" v-if="login">
						<div class="fs-xxl text-white pl-3">
							{{user.username}}
						</div>
						<div class="d-flex text-white pl-3 ai-center">
							<div class="pr-1 fs-xl">
								<svg class="icon" aria-hidden="true">
								<use xlink:href="#icon-youhuiquan"></use>
							</svg>
							</div class="pr-1">
							积分
							<div class="iconfont icon-right fs-lg"></div>
						</div>
					</div>
					<div class="d-flex jc-between text-white fs-xxl pl-3" v-if="!login">
						<router-link tag="div" to="/login">登录</router-link>
						<div class="px-2">/</div>
						<router-link tag="div" to="/register">注册</router-link>
					</div>
					
				</div>
				<div class="iconfont icon-right text-white"></div>
			</router-link>
		</div>
		
		
		<!-- 我的订单 -->
		<div class="myorder px-3 bg-white py-3">
			<div class="d-flex jc-between pb-3">
				<div class="fs-xxl">我的订单</div>
				<div class="d-flex text-grey">
					<router-link to="/order/allOrder" tag="div" class="pr-2">全部订单</router-link>
					<div class="iconfont icon-right"></div>
				</div>
			</div>
			<div class="wuliu d-flex jc-between py-3 px-3">
				<div @click="$router.push('/order/allOrder/1')">
					<div class="iconfont">
						<!-- <div class="badge"><span>{{ $store.getters.getAllCount}}</span></div> -->
						<svg class="icon" aria-hidden="true">
							<use xlink:href="#icon-fukuan1"></use>
						</svg>
					</div>
					<div>代付款</div>
				</div>
				<div @click="$router.push('/order/allOrder/2')">
					<div class="iconfont">
						<!-- <div class="badge"><span>{{ $store.getters.getAllCount}}</span></div> -->
						<svg class="icon" aria-hidden="true">
							<use xlink:href="#icon-iconfontwoyaofahuo"></use>
						</svg>
					</div>
					<div>代发货</div>
				</div>
				<div @click="$router.push('/order/allOrder/3')">
					<div class="iconfont">
						<!-- <div class="badge"><span>{{ $store.getters.getAllCount}}</span></div> -->
						<svg class="icon" aria-hidden="true">
							<use xlink:href="#icon-shouhuo"></use>
						</svg>
					</div>
					<div>待收货</div>
				</div>
				<div @click="$router.push('/order/allOrder/4')">
					<div class="iconfont">
						<!-- <div class="badge"><span>{{ $store.getters.getAllCount}}</span></div> -->
						<svg class="icon" aria-hidden="true">
							<use xlink:href="#icon-pingjia"></use>
						</svg>
					</div>
					<div>待评价</div>
				</div>
			</div>
			<!-- 轮播 -->
			<div class="lunbo py-2 px-3" v-if="login && hasOrder">
				<swiper :options="swiperOption">
					<swiper-slide v-for="(item,i) in orderList" :key="i">
						<div class="d-flex jc-between ai-center py-2">
							<div>当前订单</div>
							<div></div>
						</div>
						<div class="d-flex py-1" @click="$router.push('/order/orderInfo/'+item.order.id)">
						<div class="pr-3">
							<el-image
							style="width: 55px; height: 55px"
							:src="item.orderItemList[0].image"
							fit="cover">
						</el-image>
						</div>
							
						<div class="flex-1">
							<div class="d-flex ai-center">
								<div class="iconfont icon-shijian text-pink pr-2"></div>
								<div v-if="item.order.orderStatus == '1'" class="text-pink pr-3">代付款</div>
								<div v-if="item.order.orderStatus == '2'" class="text-pink pr-3">代发货</div>
								<div v-if="item.order.orderStatus == '3'" class="text-pink pr-3">代收货</div>
								<div v-if="item.order.orderStatus == '4'" class="text-pink pr-3">待评价</div>
								<div>(共{{item.order.totalNum}}件商品)</div>
							</div>
							<div class="pt-2 mt-3">
								<div>
									疫情特殊期订单火爆,预计会有延迟,请您谅解
								</div>
							</div>
							
						</div>
						</div>
						
					</swiper-slide>
					<div class="swiper-pagination" slot="pagination"></div>
				</swiper>
			</div>
		</div>
		<!-- 常用工具 -->
		<div class="px-3 bg-white py-3">
			<div class="d-flex jc-between pb-3">
				<div class="fs-xxl">常用工具</div>
				
			</div>
			<div class="wuliu d-flex jc-between py-3 flex-wrap">
				<router-link tag="div" to="/addressList" style="width: 25%">
					<div class="iconfont">
						<svg class="icon" aria-hidden="true">
							<use xlink:href="#icon-dizhi"></use>
						</svg>
					</div>
					<div class="text-c">地址管理</div>
				</router-link>
				<router-link tag="div" to="/user/userSuggest" style="width: 25%">
					<div class="iconfont">
						<svg class="icon" aria-hidden="true">
							<use xlink:href="#icon-liuyan"></use>
						</svg>
					</div>
					<div class="text-c">用户反馈</div>
				</router-link>
				<div style="width: 24%">
					<div class="iconfont">
						<svg class="icon" aria-hidden="true">
							<use xlink:href="#icon-icon_A"></use>
						</svg>
					</div>
					<div @click="$router.push('/infoCollection')" class="text-c">信息采集</div>
				</div>
				
				<div @click="$router.push('/yiqin')" style="width: 25%">
					<div class="iconfont">
						<svg class="icon" aria-hidden="true">
							<use xlink:href="#icon-shoucang"></use>
						</svg>
					</div>
					<div class="text-c">疫情信息</div>
				</div>
				<div @click="$router.push('/botUi')" style="width: 25%" class="pt-3">
					<div class="iconfont">
						<svg class="icon" aria-hidden="true">
							<use xlink:href="#icon-test"></use>
						</svg>
					</div>
					<div class="text-c">在线客服</div>
				</div>
			</div>
		</div>
		
		<!-- 广告 -->
		<div class="pt-3 px-2" style="background-color: #eee">
			<van-image style="width: 100%; height: 10rem; border-radius: 0.5rem" :src="require('../../assets/images/66.png')"></van-image>
		</div>
		<navFooter></navFooter>
        <user-like :title="'为你推荐'" />
        <top-wrap />
	</div>
</template>

<script>
import { Toast } from 'mint-ui'
import topWrap from "../../components/public/top-wrap";
import userLike from "../../components/home/userLike";
import navFooter from "../../components/public/navFooter";
  export default {

    components: {
      userLike,
      navFooter,
      topWrap
    },
    data(){
      return {
      	login: false,
      	user: {},
        url: '',
        orderCat: ['待付款','待发货','待收货','待评价'],
        swiperOption: {
                  spaceBetween: 30,
                  centeredSlides: true,
                  autoplay: {
                    delay: 2500,
                    disableOnInteraction: false
                },
                pagination: {
                	el: '.swiper-pagination',
                	type: 'fraction'
                },
            },
            orderList: [],
            hasOrder: false
      }
    },
    
    methods:{
      async getAllOreder(){
      	this.$store.commit('showLoading')
      	 const res = await this.$http.get(`order/findOrderByStatus.do?`)
      	 if (res.data.code != 0) {
      	 	this.hasOrder = true
      	 	this.$store.commit('hideLoading')
      	 	res.data.forEach((item,i) => {
      	 		if (item.order.orderStatus != '5') {
      	 			this.orderList.push(item)
      	 		}
      	 		
      	 	})
      	 	
      	 }
      	 if (res.data.message == '订单不存在') {
      	 	 this.hasOrder = false
             this.$store.commit('hideLoading')
      	 }
      },
      sign(){
      	if (this.login) {
      		Toast('签到成功 经验值加 +1')
      	}else{
      		this.$router.push('/login')
      	}
      	

      }
    },
    created(){

    	
    	this.login = this.$store.getters.getToken ? true : false;
    	this.user = this.$store.getters.userInfo; 
    	if (this.login) {
    		this.getAllOreder();
    	}
    	
    }
};
</script>

<style lang="scss" scoped>
.box { width: 400px; margin: auto; overflow: hidden; }
.home_top { position: relative; 
	width: 100%; 
	height: 100px; 
	text-align: center; 
	line-height: 30px; 

}
.home_top:after { 
	width: 140%; 
	height: 200px; 
	position: absolute; 
	left: -40%; 
	top: 0; 
	z-index: -1; 
	content: ''; 
	border-radius: 0 0 50% 50%;
	background: linear-gradient(#e74e4e, #e74e4e);
}
.sezhi {
	font-size: 32px;
}
.myorder {
	margin-top: 110px;
}
.wuliu .iconfont {
	position: relative;
   font-size: 25px;
   text-align: center;
   padding: 5px 0;
}
.lunbo {
	background-color: #f2f2f2;
	border-radius: 2%;
	color: #6d6e6a;
}
.swiper-pagination {
	top: 4%;
	left: 88%;
	width: 12%;
	height: 17px;
	color: white;
	border-radius: 17px;
	line-height: 17px;
	background-color: rgba(0,0,0,0.2);
}
.user {
	padding-bottom: 50px;
}
.badge {
    width: 40%;
    height: 40%;
	position: absolute;
	right: 8%;
	top: 10%;
	border-radius: 50%;
	border: 1px solid #e74e4e;
	background-color: #fff;
	color: #e74e4e;
	text-align: center;
	font-size: 14px;
}
</style>
